<template>
  <div class="wrap">
    <!-- <ul class="img_container">
      <li v-show="img_url" style="position: relative">
        <img class="show_img" :src="img_url" alt="" />
        <span class="repeat_img" @click="UploadImg()"></span>
      </li>
      <li v-show="!img_url" @click="UploadImg()">
        <div class="img_upload">
          <div class="upload_info">+</div>
          <input ref="image" type="file" name="" id="" style="display: none" @change="handleSuccess" />
        </div>
      </li>
    </ul> -->
     <input type="file" value=""  id="file"  @change='onUpload'>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      img_url: "", //显示的图片地址
    };
  },
  created() {},
  methods: {
     onUpload(e){
         var formData = new FormData(); 
         formData.append('file', e.target.files[0]);
         formData.append('type', 'test');
            this.$axios({
            method: 'post',
            url: 'http://guanli.lyqswl.com/index.php/Admin/index/image',
            params:{
              formData
            }
          }).then(res=>{
            console.log(res,'图片上传')
          })
 } 
    
  }
}
</script>

<style>
.wrap {
  padding: 30px;
}

.img_container {
  height: auto;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.img_container li {
  width: 330px;
  height: 141px;
  box-sizing: border-box;
  background: rgba(57, 114, 255, 0.1);
  border: 1px solid #3972ff;
  box-sizing: border-box;
  border-radius: 5px;
}

.img_container li > .show_img {
  width: 100%;
  height: 100%;
}
.img_upload {
  text-align: center;
  cursor: pointer;
}
.img_upload img {
  width: 31px;
  height: 31px;
  margin: 24px 0 8px 0;
}
.upload_info {
  font-size: 30px;
}
.repeat_img {
  position: absolute;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0;
  right: 0;
  top: 24px;
}
</style>